 <template
       
      >
  <div class="create">
    <a-form-model
      :model="formTitle"
      :rules="rules"
      ref="formTitleRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="问卷名称" prop="title">
        <a-input v-model="formTitle.title"></a-input>
      </a-form-model-item>
      <a-form-model-item label="问卷介绍" prop="intro">
        <a-textarea rows="3" v-model="formTitle.intro" />
      </a-form-model-item>

      <div v-if="formTitle.options.length!==0">
        <a-card v-for="(item,index) in formTitle.options" :key="index">
          <!-- 单选题 -->
          <div v-if="item.type=='radio'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>

            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>
                  <a-radio-group>
                    <div v-for="(option,opIndex) of item.options" :key="opIndex">
                      <a-radio :value="option.content">{{option.content}}</a-radio>
                    </div>
                  </a-radio-group>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(单选题)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex">
                  <a-row type="flex" justify="start" align="top" :gutter="16">
                    <a-col :span="18">
                      <a-form-model-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :label="`选项 ${ opIndex + 1 }`"
                        :prop="'options.' + index+'.options.'+opIndex+'.content'"
                        :rules="{
                required: true, message: '选项内容不能为空', trigger: 'blur'
              }"
                      >
                        <a-input v-model="option.content" placeholder="请输入选项内容" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="4">
                      <a-button type="primary" @click="addOption(item.options)">
                        <a-icon type="plus" />
                      </a-button>
                      <a-button type="danger" @click="delOption(item.options,opIndex)">
                        <a-icon type="minus" />
                      </a-button>
                    </a-col>
                  </a-row>
                </div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 多选题 -->
          <div v-if="item.type=='checkbox'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>

            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>
                  <a-checkbox-group>
                    <div v-for="(option,opIndex) of item.options" :key="opIndex">
                      <a-checkbox :value="option.content">{{option.content}}</a-checkbox>
                    </div>
                  </a-checkbox-group>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(多选题)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex">
                  <a-row type="flex" justify="start" align="top" :gutter="20">
                    <a-col :span="18">
                      <a-form-model-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :label="`选项 ${ opIndex + 1 }`"
                        :prop="'options.' + index+'.options.'+opIndex+'.content'"
                        :rules="{
                required: true, message: '选项内容不能为空', trigger: 'blur'
              }"
                      >
                        <a-input v-model="option.content" placeholder="请输入选项内容" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="4">
                      <a-button type="primary" @click="addOption(item.options)">
                        <a-icon type="plus" />
                      </a-button>
                      <a-button type="danger" @click="delOption(item.options,opIndex)">
                        <a-icon type="minus" />
                      </a-button>
                    </a-col>
                  </a-row>
                </div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 单选填空 -->
          <div v-if="item.type=='text'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>

            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>

                  <div v-for="(option,opIndex) of item.options" :key="opIndex">
                    <a-textarea :value="option.content">{{option.content}}</a-textarea>
                  </div>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(单项填空)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex">
                  <a-row type="flex" justify="start" align="top" :gutter="20">
                    <a-col :span="18">
                      <a-form-model-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :label="`选项 ${ opIndex + 1 }`"
                        :prop="'options.' + index+'.options.'+opIndex+'.content'"
                        :rules="{
                required: true, message: '内容不能为空', trigger: 'blur'
              }"
                      >
                        <a-input v-model="option.content" placeholder="请输入选项内容" />
                      </a-form-model-item>
                    </a-col>

                    <!-- 填空题不需要增加选项 -->
                    <!-- <a-col :span="4">
                            <a-button type="primary" @click="addOption(item.options)">
                              <a-icon type="plus" />
                            </a-button>
                            <a-button type="danger" @click="delOption(item.options,opIndex)">
                              <a-icon type="minus" />
                            </a-button>
                    </a-col>-->
                  </a-row>
                </div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 下拉框 -->
          <div v-if="item.type=='dropbox'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>
            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>

                  <a-select label-in-value style="width: 120px">
                    <a-select-option
                      v-for="(option,opIndex) of item.options"
                      :key="opIndex"
                      :value="option.content"
                    >{{option.content}}</a-select-option>
                  </a-select>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(下拉选择)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex">
                  <a-row type="flex" justify="start" align="top" :gutter="20">
                    <a-col :span="18">
                      <a-form-model-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :label="`选项 ${ opIndex + 1 }`"
                        :prop="'options.' + index+'.options.'+opIndex+'.content'"
                        :rules="{
                required: true, message: '选项内容不能为空', trigger: 'blur'
              }"
                      >
                        <a-input v-model="option.content" placeholder="请输入选项内容" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="4">
                      <a-button type="primary" @click="addOption(item.options)">
                        <a-icon type="plus" />
                      </a-button>
                      <a-button type="danger" @click="delOption(item.options,opIndex)">
                        <a-icon type="minus" />
                      </a-button>
                    </a-col>
                  </a-row>
                </div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 文件上传 -->
          <div v-if="item.type=='uploadFile'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>
            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>

                  <a-upload-dragger
                    name="file"
                    :multiple="true"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  >
                    <p class="ant-upload-drag-icon">
                      <a-icon type="inbox" />
                    </p>
                    <p class="ant-upload-text">请选择文件</p>
                  </a-upload-dragger>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(文件上传)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex"></div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 图片上传 -->
          <div v-if="item.type=='uploadImage'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>
            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>

                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :before-upload="beforeUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(图片上传)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex"></div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
          <!-- 自增表格 -->
          <div v-if="item.type=='increaseForm'">
            <a-row type="flex" justify="end" :gutter="20">
              <a-col>
                <a-button type="primary" @click="delSingle(index)">删除</a-button>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  @click="showTableIndex(index)"
                >{{!showTable[index]?"完成":"编辑"}}</a-button>
              </a-col>
            </a-row>

            <div v-if="showTableTop">
              <a-card v-if="showTable[index]">
                <div>
                  <h1>{{index+1}}.{{item.question}}</h1>
                  <h6>题目说明{{item.description}}</h6>

                  <div class="increaseForm">
                    <div v-for="(option,opIndex) of item.options" :key="opIndex">
                      <div>{{option.content}}</div>
                      <a-input v-if="option.type==='text'" :value="option.content"></a-input>

                      <a-select label-in-value style="width: 120px" v-if="option.type==='dropbox'">
                        <a-select-option
                          v-for="(increaseOption,index) of option.increaseOptions"
                          :key="index"
                          :value="increaseOption"
                        >{{increaseOption}}</a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>
              </a-card>
            </div>
            <div v-if="!showTable[index]">
              <a-form-model-item
                :label="`题目${index+1}(自增表格)`"
                :prop="'options.' + index + '.question'"
                :rules="{
                required: true, message: '题目内容不能为空', trigger: 'blur'
              }"
              >
                <a-input placeholder="请输入题目" v-model="item.question" />
              </a-form-model-item>
              <a-form-model-item label="题目说明">
                <a-input v-model="item.description" placeholder="请输入题目说明，可以为空" />
              </a-form-model-item>
              <a-form-model-item>
                <div v-for="(option,opIndex) of item.options" :key="opIndex">
                  <a-row type="flex" justify="start" align="top" :gutter="20">
                    <a-col :span="18">
                      <a-form-model-item
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        :label="`选项 ${ opIndex + 1 }`"
                        :prop="'options.' + index+'.options.'+opIndex+'.content'"
                        :rules="{
                required: true, message: '选项内容不能为空', trigger: 'blur'
              }"
                      >
                        <a-input v-model="option.content" placeholder="请输入选项内容" />
                        <input
                          v-model="increaseOption"
                          v-if="option.type=='dropbox'"
                          type="text"
                          placeholder="每个选项以逗号隔开"
                        />

                        <a-button
                          v-if="option.type=='dropbox'"
                          @click="addIncreaseOptions(option,increaseOption)"
                        >+</a-button>
                        {{option.type=='dropbox'?'例如 男,女':''}}
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <!-- <select style="width: 120px" v-model="option.type">
                              <option value="text">文本表格</option>
                              <option value="dropbox">下拉表格</option>
                      </select>-->

                      <!-- 判断是否是下拉表格还是文本表格,添加项不一样item.options是每一个问题选项 -->
                      <a-button type="primary" @click="addOptionIncrease(item.options,'text')">
                        文本题
                        <a-icon type="plus" />
                      </a-button>
                      <a-button type="primary" @click="addOptionIncrease(item.options,'dropbox')">
                        下拉题
                        <a-icon type="plus" />
                      </a-button>
                      <a-button type="danger" @click="delOption(item.options,opIndex)">
                        <a-icon type="minus" />
                      </a-button>
                    </a-col>
                  </a-row>
                </div>
                <a-form-model-item label="必填项">
                  <a-switch v-model="item.isRequired"></a-switch>
                </a-form-model-item>
              </a-form-model-item>
            </div>
          </div>
        </a-card>
      </div>
      <a-row type="flex" justify="start">
        <a-col>
          <a-button @click="addQuestionRadio">
            <a-icon type="plus-square" />单选
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionCheckbox">
            <a-icon type="check" />多选
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionText">
            <a-icon type="italic" />单选填空
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionSelect">
            <a-icon type="database" />下拉选择
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionFile">
            <a-icon type="folder" />文件上传
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionImage">
            <a-icon type="picture" />图片上传
          </a-button>
        </a-col>
        <a-col>
          <a-button @click="addQuestionIncrease">
            <a-icon type="down-square" />自增表格
          </a-button>
        </a-col>
      </a-row>
      <!-- <questionList>  </questionList> -->

      <a-form-model-item>
        <a-button type="primary" @click="submit">提交问卷</a-button>
        <a-button type="primary" @click="submit">预览</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  data() {
    let checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9])/;
      if (regEmail.test(value)) {
        return cb();
      }
      cb(new Error("错误通过"));
    };
    return {
      increaseOption: "",
      checkEmail,
      showTable: {},
      showTableTop: "",
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },

      formTitle: {
        title: "欢迎使用问卷管理",
        intro:
          "为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！",
        questionnaireId: "",
        options: [
          {
            type: "uploadFile",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "喜欢的人",
            description: "谁都有喜欢的明星是吧",
            isRequired: true,
            radioValue: "",
            quptions: [
              {
                id: 1,
                content: "刘亦菲"
              }
            ]
          },
          {
            type: "increaseForm",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "喜欢的人",
            description: "谁都有喜欢的明星是吧",
            isRequired: true,
            radioValue: "",
            options: [
              {
                id: 1,
                content: "姓名",
                type: "text"
              },
              {
                id: 2,
                content: "年龄",
                type: "text"
              },

              {
                id: 3,
                content: "性别",
                type: "dropbox",
                increaseOptions: [
                  "男",
                  "女"
                  // {
                  //   content: "男",
                  //   id: 1
                  // },
                  // {
                  //   content: "女",
                  //   id: 2
                  // }
                ]
              }
            ]
          },
          {
            type: "uploadImage",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "喜欢的人",
            description: "谁都有喜欢的明星是吧",
            isRequired: true,
            radioValue: "",
            options: [
              {
                id: 1,
                content: "刘亦菲"
              }
            ]
          },
          {
            type: "radio",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "喜欢的人",
            description: "谁都有喜欢的明星是吧",
            isRequired: true,
            radioValue: "",
            options: [
              {
                id: 1,
                content: "刘亦菲"
              },
              {
                id: 2,
                content: "张静初"
              }
            ]
          },
          {
            type: "checkbox",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "那个人喜欢你",
            description: "",
            isRequired: true,
            checkboxValue: [],
            options: [
              {
                content: "刘亦菲",
                id: 1
              },
              {
                content: "刘亦菲1",
                id: 2
              }
            ]
          },
          {
            type: "text",
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            question: "填空谁喜欢你",
            description: "",
            isRequired: true,
            textValue: "",
            options: [
              {
                content: "刘亦菲",
                id: 1
              }
            ]
          },
          {
            type: "dropbox",
            question: "",
            description: "",
            isRequired: true,
            questionId:
              new Date().getTime() + Math.floor(Math.random() * 10 + 1),
            radioValue: "",
            options: [
              {
                content: "刘亦菲",
                id: 1
              },
              {
                content: "刘德华",
                id: 2
              },
              {
                content: "谢娜",
                id: 3
              }
            ]
          }
        ]
      },

      rules: {
        title: [
          {
            required: true,
            message: "请输入问卷描述",
            trigger: "blur"
          }
        ],
        intro: [
          {
            required: true,
            message: "请输入问卷介绍",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //完成和编辑切换方法
    showTableIndex(index) {
      this.showTable[index] = !this.showTable[index];
      this.showTableTop = false;
      this.showTableTop = true;

      console.log(this.showTable[index]);
    },
    addQuestionIncrease() {
      const increaseForm = {
        type: "increaseForm",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        question: "喜欢的人",
        description: "谁都有喜欢的明星是吧",
        isRequired: true,
        radioValue: "",
        options: [
          {
            id: 1,
            content: "姓名",
            type: "text"
          }
        ]
      };
      this.formTitle.options.push(increaseForm);
    },
    addQuestionFile() {
      const uploadFile = {
        type: "uploadFile",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        question: "",
        description: "",
        isRequired: true,
        radioValue: "",
        options: [
          {
            content: "",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(uploadFile);
      console.log(111);
      console.log(this.questionList);
    },
    addQuestionImage() {
      const uploadImage = {
        type: "uploadImage",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        question: "",
        description: "",
        isRequired: true,
        radioValue: "",
        options: [
          {
            content: "",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(uploadImage);
      console.log(111);
      console.log(this.questionList);
    },
    addQuestionRadio() {
      const radio = {
        type: "radio",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        question: "",
        description: "",
        isRequired: true,
        radioValue: "",
        options: [
          {
            content: "",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(radio);
      console.log(111);
      console.log(this.questionList);
      window.scrollTo(0, document.body.scrollHeight);
    },

    addQuestionCheckbox() {
      console.log("duoxuanti");
      const checkbox = {
        type: "checkbox",
        question: "",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        description: "",
        isRequired: true,
        checkboxValue: [],
        options: [
          {
            content: "第一个选项",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(checkbox);

      console.log(this.formTitle.options);
    },
    addQuestionText() {
      console.log("duoxuanti");
      const checkbox = {
        type: "text",
        question: "",
        description: "",
        isRequired: true,
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        textValue: "",
        options: [
          {
            content: "第一个选项",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(checkbox);

      console.log(this.questionList);
    },
    addQuestionSelect() {
      const select = {
        type: "dropbox",
        question: "",
        description: "",
        questionId: new Date().getTime() + Math.floor(Math.random() * 10 + 1),
        isRequired: true,
        radioValue: "",
        options: [
          {
            content: "第一个选项",
            id: 1
          }
        ]
      };

      this.formTitle.options.push(select);
    },
    addIncreaseOptions(option, increaseOption) {
      console.log(option, increaseOption);
      const contents = increaseOption.split(",");
      console.log("===字符串", contents);
      option.increaseOptions = contents;
      this.$message.success("添加成功");
    },
    addOptionIncrease(option, type) {
      if (type === "text") {
        this.$message.success("添加文本题");
        const IncreaseText = {
          content: "",
          type: "text"
        };
        option.push(IncreaseText);
      } else if (type === "dropbox") {
        this.$message.success("添加下拉题");
        const IncreaseDropbox = {
          content: "",
          type: "dropbox",
          increaseOptions: [{ content: "男" }]
        };
        console.log(IncreaseDropbox);
        option.push(IncreaseDropbox);
      }
    },
    addOption(options) {
      console.log(options);
      const radioOption = {
        content: "",
        id: options.length + 1
      };
      options.push(radioOption);
      console.log("====length", options.length);
      console.log(options);
    },
    delOption(options, opIndex) {
      console.log("====", options.length);
      options.length === 1
        ? this.$message.warning("就剩一个了啦")
        : options.splice(opIndex, 1);
    },

    delSingle(index) {
      const confirm = window.confirm("确定删除吗");
      confirm && this.formTitle.options.splice(index, 1);
    },
    submit() {
      this.$refs.formTitleRef.validate(val => {
        if (val) {
          console.log(this.formTitle);
          let formTitle = JSON.stringify(this.formTitle);
          window.sessionStorage.setItem("formTitle", formTitle);
          console.log("====", window.sessionStorage.getItem("formTitle"));
          let text = this.$router.resolve({
            path: "/preview"
          });
          window.open(text.href, "_blank");
        } else {
          this.$message.warning("必选项未填");
        }
      });
    }
  }
};
</script>
<style  lang="scss" scoped >
.increaseForm {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.create {
  margin: 24px 16px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
  min-width: 1366px;
  .add-option {
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>